<template>
  <el-row>
    <el-col :span="12">
      <el-table :data="tableData.jstList" row-key="id" default-expand-all>
        <el-table-column label="2C销售-聚水潭" align="center">
          <el-table-column prop="outBountDate" label="出库日期" align="center" />
          <el-table-column prop="shopName" label="店铺名称" align="center" />
          <el-table-column prop="jstCode" label="金蝶物料编码" align="center" />
          <el-table-column prop="jstSumCount" label="求和项：数量" align="center" />
        </el-table-column>
      </el-table>
    </el-col>
    <el-col :span="12">
      <el-table :data="tableData.kingDeeList" style="height: 100%" row-key="id" :cell-style="tableCellStyle" default-expand-all>
        <el-table-column align="center" label="2C销售-金蝶">
          <el-table-column prop="outBountDate" label="日期" align="center" />
          <el-table-column prop="custom" label="客户" align="center" />
          <el-table-column prop="kingDeeCode" label="物料编码" align="center" />
          <el-table-column prop="kingDeeSumCount" label="求和项：调拨数量" align="center" />
          <el-table-column prop="diffCount" width="80" label="总的差异" align="center">
            <!-- <template #default="scope">
                <div :class="scope.row.diffCount &&  scope.row.diffCount !== '' ? 'text-red' : '' ">{{ scope.row.diffCount }}</div>
            </template> -->
          </el-table-column>
        </el-table-column>
      </el-table>
    </el-col>
  </el-row>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
// 定义数据
const tableData = ref({
  jstList: [],
  kingDeeList: []
});

// 定义表格单元格样式
const tableCellStyle = ({ row, column, rowIndex, columnIndex }) => {
  if (columnIndex === 4 && row.diffCount && row.diffCount !== '') {
    return {
      background: 'red',
      color: 'white'
    };
  }
  return '';
};

// 模拟请求方法
const fetchData = () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({
        data: {
          jstList: [
            {
              id: 'jst1',
              outBountDate: '2024-09-12',
              children: [
                {
                  id: 'jst1-1',
                  shopName: '天猫',
                  children: [
                    {
                      id: 'jst1-1-1',
                      jstCode: 'HC120100000000-CN',
                      jstSumCount: 30
                    },
                    {
                      id: 'jst1-1-2',
                      jstCode: 'HC120100000000-CN',
                      jstSumCount: 30
                    }
                  ]
                },
                {
                  id: 'jst1-2',
                  shopName: '抖音',
                  children: [
                    {
                      id: 'jst1-2-1',
                      jstCode: 'HC120100000000-CN',
                      jstSumCount: 30
                    },
                    {
                      id: 'jst1-2-2',
                      jstCode: 'HC120100000000-CN',
                      jstSumCount: 30
                    }
                  ]
                }
              ]
            }
          ],
          kingDeeList: [
            {
              id: 'kd1',
              outBountDate: '2024-09-12',
              children: [
                {
                  id: 'kd1-1',
                  custom: '抖音',
                  children: [
                    {
                      id: 'kd1-1-1',
                      kingDeeCode: 'HC120100000000-CN',
                      kingDeeSumCount: 20,
                      diffCount: 10
                    },
                    {
                      id: 'kd1-1-2',
                      kingDeeCode: 'HC120100000000-CN',
                      kingDeeSumCount: 20,
                      diffCount: 10
                    }
                  ]
                },
                {
                  id: 'kd1-2',
                  custom: '天猫',
                  children: [
                    {
                      id: 'kd1-2-1',
                      kingDeeCode: 'HC120100000000-CN',
                      kingDeeSumCount: 20,
                      diffCount: 10
                    },
                    {
                      id: 'kd1-2-2',
                      kingDeeCode: 'HC120100000000-CN',
                      kingDeeSumCount: 20,
                      diffCount: 10
                    }
                  ]
                }
              ]
            }
          ]
        }
      });
    }, 1000); // 模拟延迟1秒
  });
};

// 页面加载时模拟请求
onMounted(async () => {
  try {
    const res = await fetchData();
    tableData.value.jstList = res.data.jstList;
    tableData.value.kingDeeList = res.data.kingDeeList;
    console.log('tableData', tableData.value);
  } catch (error) {
    console.error('请求失败:', error);
  }
});
</script>
<style scoped>
.text-red {
  background: red;
  color: white;
}
</style>
